﻿<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <el-row>
          <el-col :span="4">
            <el-form-item label>
              <el-input v-model="queryBox.activityCode" placeholder="请输入内容">
                <template slot="prepend">活动编码</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label>
              <el-input v-model="queryBox.activityName" placeholder="请输入活动名称">
                <template slot="prepend">活动名称</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label>
              <div class="depart-box">
                <div class="slect-title">用户</div>
                <el-select v-model="queryBox.systemUserName" filterable clearable>
                  <el-option
                    v-for="item in systemUserList"
                    :key="item.id"
                    :label="item.userName"
                    :value="item.userName"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label prop="accountStatus">
              <div class="depart-box">
                <div class="slect-title">创建时间</div>
                <el-date-picker
                  v-model="time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label>
              <div class="depart-box">
                <div class="slect-title">三方</div>
                <el-select v-model="queryBox.frontUserName" clearable>
                  <el-option
                    v-for="item in queryUserList"
                    :key="item.id"
                    :label="item.threePartName"
                    :value="item.threePartName"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label>
              <div class="depart-box">
                <div class="slect-title">学校</div>
                <el-select v-model="queryBox.schoolName" clearable>
                  <el-option
                    v-for="item in schoolList"
                    :key="item.id"
                    :label="item.schoolName"
                    :value="item.schoolName"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label prop="name">
              <el-input v-model="queryBox.clazzName" placeholder="请输入班级">
                <template slot="prepend">班级</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button :label="$t('action.search')" perms="true" type="primary" @click="search" />
      </div>
    </div>
    <div class="add-btns fl">
      <kt-button
        :label="$t('新增推广链接')"
        type="primary"
        perms="ActivityManage:Activity:add"
        @click="handleNewADD"
      ></kt-button>
    </div>
    <!--表格内容栏-->
    <div class="btns">
      <Crm-table
        class="table-width"
        extension
        width="400"
        permsSee="customer:xuecoo:see"
        permsEdit="customer:xuecoo:edit"
        :data="pageResult"
        :columns="columns"
        :loading="loading"
        @findPage="findPage"
        @toSee="toSee"
        @download="download"
        @generateSubLink="generateSubLink"
        @onError="onError"
        @onCopy="onCopy"
        :showBatchDelete="false"
      ></Crm-table>
    </div>
    <!--新增界面-->
    <el-dialog
      title="新增活动链接"
      class="query-box"
      width="40%"
      :visible.sync="dialogVisible"
      @close='dialogVisibleClose'
      :close-on-click-modal="false"
    >
      <el-form :model="showAddBox" ref="addBox" :rules="dataFormRules" label-position="right">
        <el-row>
          <el-col :span="11">
            <el-form-item label prop="activityName">
              <div class="depart-box">
                <div class="slect-title">活动选择</div>
                <el-select v-model="showAddBox.activityName" clearable @change="changeSel">
                  <!-- <el-select clearable> -->
                  <el-option
                    v-for="item in activityManagerList"
                    :key="item.id"
                    :label="item.activityName"
                    :value="item.activityName"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label>
              <el-input v-model="showAddBox.activityCode" placeholder="请输入内容" :disabled="true">
                <template slot="prepend">活动编码</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" style="margin-left: 4%;">
            <el-form-item label>
              <el-input v-model="showAddBox.activityName" placeholder="请输入内容" :disabled="true">
                <template slot="prepend">活动名称</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label prop="systemUserName">
              <div class="depart-box">
                <div class="slect-title">选择用户</div>
                <el-select v-model="showAddBox.systemUserName" filterable clearable @change="changeSystem">
                  <el-option
                    v-for="item in systemUserList"
                    :key="item.id"
                    :label="item.userName"
                    :value="item.userName"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label prop="name">
              <el-input v-model="showAddBox.systemUserCode" placeholder="请输入内容" :disabled="true">
                <template slot="prepend">大区经理用户名</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label prop="name">
              <el-input v-model="showAddBox.systemUserName2" placeholder="请输入内容" :disabled="true">
                <template slot="prepend">大区经理姓名</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label prop="frontUserName">
              <div class="depart-box">
                <div class="slect-title">选择三方</div>
                <el-select v-model="showAddBox.frontUserName" clearable @change="changeUserList">
                  <el-option
                    v-for="item in queryUserList"
                    :key="item.id"
                    :label="item.threePartName"
                    :value="item.threePartName"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label prop="name">
              <el-input v-model="showAddBox.frontUserCode" placeholder="请输入内容" :disabled="true">
                <template slot="prepend">三方编码</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label prop="name">
              <el-input v-model="showAddBox.frontUserName" placeholder="请输入内容" :disabled="true">
                <template slot="prepend">三方名称</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label prop="schoolName">
              <div class="depart-box">
                <div class="slect-title">选择学校</div>
                <el-select v-model="showAddBox.schoolName" clearable @change="changeSchool">
                  <el-option
                    v-for="item in schoolList"
                    :key="item.id"
                    :label="item.schoolName"
                    :value="item.schoolName"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label prop="name">
              <el-input v-model="showAddBox.schoolCode" placeholder="请输入内容" :disabled="true">
                <template slot="prepend">学校编码</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label prop="name">
              <el-input v-model="showAddBox.schoolName" placeholder="请输入内容" :disabled="true">
                <template slot="prepend">学校名称</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label prop="clazzName">
              <el-input v-model="showAddBox.clazzName" placeholder="请输入内容">
                <template slot="prepend">设置班级</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align:center" class="dialog-footer">
        <el-button :size="size" @click.native="dialogVisibleClose">{{ $t("action.cancel") }}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitAdd"
          :loading="editLoading"
        >{{ $t("action.submit") }}</el-button>
      </div>
    </el-dialog>
    <!-- 查看二维码 -->
    <el-dialog title="查看二维码" width="20%" :visible.sync="addFollow" :close-on-click-modal="false">
      <img :src="url+'/'+imgURL" alt />
      <p v-if="popData.activityName">活动名称：{{popData.activityName}}</p>
      <p v-if="popData.systemUserRealName">大区经理：{{popData.systemUserRealName}}</p>
      <p v-if="popData.frontUserThreePartName">三方：{{popData.frontUserThreePartName}}</p>
      <p v-if="popData.schoolName">学校：{{popData.schoolName}}</p>
      <kt-button
        class="stu-btn"
        label="下载二维码"
        perms="true"
        type="primary"
        size="medium"
        @click="download(popData2)"
      />
    </el-dialog>
  </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";

import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "Xuecoo",
  components: {
    CrmTable,
    KtButton
  },
  data() {
    return {
      size: "mini",
      editLoading: false,
      queryBox: {},
      addBox: {},
      showAddBox: {
        activityName:'',
        activityCode:'',
        systemUserName:'',
        systemUserCode:'',
        systemUserName2:'',
        frontUserName:'',
        frontUserCode:'',
        frontUserName:'',
        schoolName:'',
        schoolCode:'',
        schoolName:'',
        clazzName:'',
      }, //回显
      mytime: "",
      dialogVisible: false, // 新增界面是否显示
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "activityCode", label: "活动编码", minWidth: 120 },
        { prop: "activityName", label: "活动名称", minWidth: 100 },
        { prop: "systemUserRealName", label: "大区经理", minWidth: 190 },
        { prop: "frontUserThreePartName", label: "三方", minWidth: 100 },
        { prop: "schoolName", label: "学校", minWidth: 70 },
        { prop: "clazzName", label: "班级", minWidth: 50 },
        { prop: "createDate", label: "创建时间", minWidth: 120 },
        { prop: "childLink", label: "推广子链接", minWidth: 120 }
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      // 限制跟进时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
        }
      },
      loading: false, // 加载标识
      activityManagerList: [], //活动列表
      queryUserList: [], //大区经理列表
      systemUserList: [], //三方列表
      schoolList: [], //学校列表
      popData: "",
      popData2: "",
      imgURL: "",
      addFollow: false, //显示跟进窗口
      url: baseUrl,
      dataFormRules: {
        activityName: [{ required: true, message: "请选择活动", trigger: "change" }],
        // systemUserName: [
        //   { required: true, message: "请选择大区经理", trigger: "change" }
        // ],
        // frontUserName: [{ required: true, message: "请选择三方", trigger: "change" }],
        // schoolName: [{ required: true, message: "请选择学校", trigger: "change" }],
        // clazzName: [{ required: true, message: "请设置班级", trigger: "blur" }]
      },
      time: ""
    };
  },
  mounted() {
    this.get_dataTime();
    // 获取活动列表
    this.$api.agent.getActivityManage().then(res => {
      this.activityManagerList = res.activityManagerList;
    });
    // 获取大区经理列表
    this.$api.dropdown.users().then(res => {
      this.systemUserList = res.userInfoList;
    });
    // 获取三方列表
    this.queryUserList = JSON.parse(localStorage.getItem("SFcacheList"));
    // 获取学校列表
    this.$api.oem.schoolList().then(res => {
      this.schoolList = res.data;
    });
  },
  methods: {
    // 活动选择变化操作
    changeSel(data) {
      this.showAddBox.activityCode=""
      let nowData = this.activityManagerList.find(item => {
        return item.activityName === data;
      });
      this.showAddBox.activityCode = nowData.activityCode;
      this.addBox.activityId = nowData.id;
    },
    // 选择三方变化操作
    changeUserList(data) {
      this.showAddBox.frontUserCode=""
      let nowData = this.queryUserList.find(item => {
        return item.threePartName === data;
      });
      this.showAddBox.frontUserCode = nowData.userName;
      this.addBox.frontUserId = nowData.id;
    },
    // 大区经理变化操作
    changeSystem(data) {
      this.showAddBox.systemUserCode=""
      let nowData = this.systemUserList.find(item => {
        return item.userName === data;
      });
      this.showAddBox.systemUserCode = nowData.userName;
      this.addBox.systemUserId = nowData.id;
      this.showAddBox.systemUserName2=nowData.realName
    },
    // 学校列表变化操作
    changeSchool(data) {
      this.showAddBox.schoolCode=""
      let nowData = this.schoolList.find(item => {
        return item.schoolName === data;
      });
      this.showAddBox.schoolCode = nowData.schoolCode;
      this.addBox.schoolId = nowData.id;
    },
    // 搜索
    search() {
      this.loading = true;
      this.pageRequest.pageNum = 1;
      this.queryBox.isConsultant=1
      if (this.queryBox.systemUserName) {
        this.systemUserList.forEach(item => {
          if (item.userName === this.queryBox.systemUserName) {
            this.queryBox.systemUserId = item.id;
          }
        });
      }
      if (this.queryBox.frontUserName) {
        this.queryUserList.forEach(item => {
          if (item.threePartName === this.queryBox.frontUserName) {
            this.queryBox.frontUserId = item.id;
          }
        });
      }
      if (this.queryBox.schoolName) {
        this.schoolList.forEach(item => {
          if (item.schoolName === this.queryBox.schoolName) {
            this.queryBox.schoolId = item.id;
          }
        });
      }
      if (this.time) {
        this.queryBox.createStartDate = this.time[0];
        this.queryBox.createStopDate = this.time[1];
      }
      this.findPage(null);
    },
    handleChange(value) {
      console.log(value);
    },
    get_dataTime() {
      let dateTime = new Date();
      // this.saveData.contractDate = this.dateFormat(dateTime);
      let mytime = dateTime.toLocaleTimeString("chinese", { hour12: false }); //获取当前时间
      this.mytime = mytime;
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.queryBox.isConsultant=1
      this.$api.agent
        .extensionManPageList(this.queryBox)
        .then(res => {
          if (res.result == 1) {
            let content = {
              content: res.data,
              totalSize: res.total
            };
            this.pageResult = content;
            this.loading = false;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        })
        .then(data != null ? data.callback : "");
    },
    DateMinus(date1, date2) {
      //date1:小日期   date2:大日期
      var sdate = new Date(date1);
      var now = new Date(date2);
      var days = now.getTime() - sdate.getTime();
      var day = parseInt(days / (1000 * 60 * 60 * 24));
      return day;
    },
    // 生成子链接
    generateSubLink(params) {
      this.$api.agent
        .generateSubLink({ activityId: params.row.id })
        .then(res => {
          if (res.result == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            params.row.status = 1;
            if (params.row.status == 1) {
              params.row.statusInfo = "已生成子链接";
            } else {
              params.row.statusInfo = "未生成子链接";
            }
            // this.findPage(null)
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        });
    },
    // 重置
    reset(queryBox) {
      this.queryBox = {};
      this.time = "";
      this.findPage(null);
    },
    handleNewADD() {
      this.dialogVisible = true;
    },
    // 新增提交
    submitAdd() {
      this.$refs["addBox"].validate(valid => {
        // console.log(valid)
        if (valid) {
          this.addBox.clazzName=this.showAddBox.clazzName
          this.addBox.isConsultant=1
          this.editLoading = true;
          let params = Object.assign({}, this.addBox);
          this.$api.agent.extensionManSaveInfo(params).then(res => {
            if (res.result == 1) {
              this.$message({ message: "操作成功", authType: "success" });
              this.dialogVisible = false;
              this.$refs["addBox"].resetFields();
              this.showAddBox.activityName=''
              this.showAddBox.activityCode=''
              this.showAddBox.systemUserName=''
              this.showAddBox.systemUserCode=''
              this.showAddBox.systemUserName2=''
              this.showAddBox.frontUserName=''
              this.showAddBox.frontUserCode=''
              this.showAddBox.frontUserName=''
              this.showAddBox.schoolName=''
              this.showAddBox.schoolCode=''
              this.showAddBox.clazzName=''
            } else {
              this.$message({
                message: "操作失败, " + res.msg,
                authType: "error"
              });
            }
            this.findPage(null);
            this.editLoading = false;
          });
        }
      });
    },
    dialogVisibleClose(){
      this.dialogVisible=false
      this.showAddBox.activityName=''
      this.showAddBox.activityCode=''
      this.showAddBox.systemUserName=''
      this.showAddBox.systemUserCode=''
      this.showAddBox.systemUserName2=''
      this.showAddBox.frontUserName=''
      this.showAddBox.frontUserCode=''
      this.showAddBox.frontUserName=''
      this.showAddBox.schoolName=''
      this.showAddBox.schoolCode=''
      this.showAddBox.clazzName=''
    },
    // 查看二维码
    toSee: function(params) {
      this.addFollow = true;
      this.popData = params.row;
      this.popData2 = params;
      this.$api.agent
        .extensionManQueryQCode({ id: params.row.id })
        .then(res => {
          if (res.result == 1) {
            this.imgURL = res.data.path;
          }
        });
    },
    // 下载二维码
    download: function(params) {
      this.$api.agent.extensionManQueryQCode({ id: params.row.id }).then(res => {
        if (res.msg != "") {
          this.$message({
            message: res.msg,
            type: "error"
          });
        } else {
          this.downloadIamge(
            baseUrl + "/" + res.data.path,
            res.data.picName
          );
        }
      });
    },
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
    onCopy(params) {
      this.$message({
        message: "复制成功" + params.text,
        type: "success"
      });
    },
    onError(params) {
      this.$message({
        message: "复制失败",
        type: "error"
      });
    }
  }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scoped>
.checked-person {
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.el-dialog__wrapper .el-form-item__content {
  margin-left: 0;
}
.demo-form-inline {
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input {
    width: 93% !important;
  }
  .el-select {
    width: 100% !important;
  }
  .tit {
    display: inline-block;
    margin-top: 10%;
  }
}
.btn .el-button {
  padding: 9px 5px !important;
}
</style>
<style>
.batchdistribution-pop .el-dialog__header {
  padding: 0 0 0 0 !important;
}
</style>
